<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>招生报名</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>
<body>

        <link rel="stylesheet" href="https://www.swiper.com.cn/dist/css/swiper.min.css">
        <script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script>
    <style>
        body{background:#fff;}
        .xqcontent{max-width:1440px;margin:0 auto;}
        .xiaoquinfos{width:100%;overflow: hidden;}
        .xqjieshao{width:35%;float:left;padding:3rem 5rem;box-sizing: border-box;}
        .xqimg{width:65%;float:right;}
        .xqjieshao .t1{color:#0e388a;font-weight: bold;font-size:16px;}
        .xqjieshao h3{margin-top:4rem;color:#333;font-size:1.5rem;}
        .xqjieshao .lin1{width:96px;height:2px;background: #333;display: block;}
        .xqjieshao .lin2{width:46px;height:2px;background: #333;display: block;margin-top: 5px;}
        .xqjieshao h4{font-size:1rem;margin-top:1.2rem;font-weight: bold;}
        .xqjieshao p{margin-top:1rem;font-size:14px;}
        .jianyingcontent{width:100%;padding-left:5rem;margin-top:3rem;position:relative;}
        .xyjytab{width:158px;height:250px;}
        .xyjy h3{color:#fff;font-size:20px;}
        .xyjy span{width:60px;height:2px;background:#fff;display: block;}
        .xyjy p{font-size:15px;line-height:15px;margin-top:10px;}
        .xyjy{padding:2rem 1rem;background:#141765;color:#fff;}
        .xyjytab .qhbtn{margin-top:15px;border:solid 1px #333;color:#333333;padding:14px;display: inline-block;float:right;}
        .xyjytab .qhbtn:hover{background:#141765;color:#fff;}
        .slqhlist{width:1149px;position:absolute;right:0;top:0;height:250px;}

        .anquzhineng{max-width:1440px;margin:0 auto;overflow: hidden;}
        .anqutup1{width:65%;float: left;}
        .anqutup2{width:35%;float:right;padding:3rem 4rem;}
    </style>
    <div class="nrheadtablink">
        <a href="" class="active">萧山校区</a>
        <a href="">安保介绍</a>
    </div>

    <div class="xqcontent">
        <div class="xiaoquinfos swiper-container ">
            <div class="swiper-wrapper">
                <div class="xqnritem swiper-slide">
                    <div class="xqjieshao">
                        <div class="t1">YANZHI<br>ART-</div>
                        <h3>萧山校区</h3>
                        <span class="lin1"></span>
                        <span class="lin2"></span>
                        <h4>坐 落 萧 山 楼 塔，人 文 艺 术 相 互 交 融</h4>
                        <p>杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志</p>
                    </div>
                    <div class="xqimg"><img src="./img/img23.png" width="100%" alt=""></div>
                </div>
                <div class="xqnritem swiper-slide">
                    <div class="xqjieshao">
                        <div class="t1">YANZHI<br>ART-</div>
                        <h3>萧山校区</h3>
                        <span class="lin1"></span>
                        <span class="lin2"></span>
                        <h4>坐 落 萧 山 楼 塔，人 文 艺 术 相 互 交 融</h4>
                        <p>杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志</p>
                    </div>
                    <div class="xqimg"><img src="./img/img23.png" width="100%" alt=""></div>
                </div>
                <div class="xqnritem swiper-slide">
                    <div class="xqjieshao">
                        <div class="t1">YANZHI<br>ART-</div>
                        <h3>萧山校区</h3>
                        <span class="lin1"></span>
                        <span class="lin2"></span>
                        <h4>坐 落 萧 山 楼 塔，人 文 艺 术 相 互 交 融</h4>
                        <p>杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志</p>
                    </div>
                    <div class="xqimg"><img src="./img/img23.png" width="100%" alt=""></div>
                </div>
                <div class="xqnritem swiper-slide">
                    <div class="xqjieshao">
                        <div class="t1">YANZHI<br>ART-</div>
                        <h3>萧山校区</h3>
                        <span class="lin1"></span>
                        <span class="lin2"></span>
                        <h4>坐 落 萧 山 楼 塔，人 文 艺 术 相 互 交 融</h4>
                        <p>杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志杭州言志美术培训学校是工商局正规注册杭州言志</p>
                    </div>
                    <div class="xqimg"><img src="./img/img23.png" width="100%" alt=""></div>
                </div>
            </div>
        </div>
        <div class="jianyingcontent">
            <div class="xyjytab">
                <div class="xyjy">
                    <h3>校园剪影</h3>
                    <span></span>
                    <p>SHCOOL<br>PHTOTO</p>
                </div>
                <a class="qhbtn button-prev" style="float:left;"><<<</a>
                <a class="qhbtn button-next">>>></a>
            </div>
            <div class="slqhlist swiper-container ">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/index/slv-img1.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/slv-img1.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/slv-img1.png" alt=""></div>
                    <div class="swiper-slide"><img src="./img/index/slv-img1.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
    <div class="listtitle">
        <p class="listheadtitle">智能安防 安全保障</p>
    </div>
    <div class="anquzhineng">
        <div class="anqutup1"><img src="./img/img24.png" alt=""></div>
        <div class="anqutup2"><img src="./img/xujs.png" alt=""></div>
    </div>
</body>
<script src="./js/commond.js"></script>
<script>
    var galleryThumbs = new Swiper('.slqhlist', {
        spaceBetween: 20,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.xiaoquinfos', {
        navigation: {
            nextEl: '.button-next',
            prevEl: '.button-prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });
</script>
    
</html>